<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="top">
			<span class="classManagement">班级管理 <i class="el-icon-arrow-right"></i></span>
			<span class="addAdministration" @click="addAdministration">+添加行政班</span>
			<!--<span class="addInterest" @click="addInterest">+添加兴趣班</span>-->
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
			<div class="card">
				<!--搜索区域-->
				<el-form :inline="true" class="demo-form-inline">
				  <el-form-item label="类型">
				    <el-select v-model="classification" placeholder="类型" clearable>
				      <el-option v-for ="item in classesType" :label="item.type" :value="item.type" :key="item.id"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item label="老师" v-if="rule == 2?false:true">
				    <el-select v-model="teacherId" placeholder="老师" clearable>
				      <el-option v-for="(item,index) in Teacher" :label="item.teacher_name" :value="item.id" :key = "index"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="danger" @click="onSubmit">搜索</el-button>
				  </el-form-item>
				</el-form>
				<!--表格区域-->
				<el-table :data="classInfo" style="width: 100%">
          <el-table-column prop="class_name" label="班级" width="140" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" width="80" align="center"></el-table-column>
          <el-table-column prop="count" label="人数" width="80"align="center"></el-table-column>
          <el-table-column prop="man" label="男生" width="100" align="center"></el-table-column>
          <el-table-column prop="woman" label="女生" width="100" align="center"><span></span></el-table-column>
          <el-table-column prop="teacher_name" label="老师" width="180" align="center"></el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="del(scope.row.id)" type="success" plain size="mini">删除</el-button>
              <el-button @click="configureClass(scope.row.id)" type="danger"  plain size="mini">查看学生</el-button>
              <el-button v-if="rule == 2?false:true" @click="teacherDistributionClassInfo(scope.row.id)" type="info"  plain size="mini">分配老师</el-button>
            </template>
          </el-table-column>
				</el-table>
				<!--分页功能-->
				<el-pagination class="fenye"
				   @size-change="SizeChange"
				   @current-change="currentChange"
				   :current-page="page"
           :page-sizes="pagesizes"
           :page-size="rows"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           v-if ="classInfo.length == 0? false :true">
			  	</el-pagination>
				<!--添加行政班-->
				<el-dialog title="添加行政班" :visible.sync="showAdd" width="40%">
					<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="选择年级" >
              <el-select clearable v-model="gradeId" placeholder="请选择年级">
                <el-option v-for="item in year" :label="item.grade_title" :value="item.id" :key = "item.id"></el-option>
              </el-select>
				 		</el-form-item>
				 		<el-form-item label="班级数量">
              <el-input v-model="ruleForm.classNum" style="width:220px"></el-input>
				 		</el-form-item>
				 		<el-form-item label="任教老师">
              <el-select clearable v-model="teacherAll" placeholder="请选择任教老师">
                <el-option v-for="item in teacherName" :label="item.teacher_name" :value="item.id" :key="item.id"></el-option>
              </el-select>
				 		</el-form-item>
				  		<el-form-item>
				    		<el-button type="primary" @click="addClass" class="btn"><i class="el-icon-check"></i>生成班级</el-button>
			  			</el-form-item>
					</el-form>
				</el-dialog>
				<!--添加兴趣班-->
				<!--<el-dialog title="添加兴趣班" :visible.sync="showAddInterest" width="40%">-->
					<!--<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">-->
            <!--<el-form-item label="选择年级" >-->
              <!--<el-select v-model="ruleForm.grade" placeholder="请选择活动区域">-->
                <!--<el-option label="区域一" value="shanghai"></el-option>-->
                <!--<el-option label="区域二" value="beijing"></el-option>-->
              <!--</el-select>-->
				 		<!--</el-form-item>-->
				 		<!--<el-form-item label="班级数量">-->
				    		<!--<el-input v-model="ruleForm.classNum" style="width:220px"></el-input>-->
				 		<!--</el-form-item>-->
				 		<!--<el-form-item label="任教老师">-->
              <!--<el-select v-model="ruleForm.teacher" placeholder="请选择活动区域">-->
                <!--<el-option label="区域一" value="shanghai"></el-option>-->
                <!--<el-option label="区域二" value="beijing"></el-option>-->
              <!--</el-select>-->
				 		<!--</el-form-item>-->
				  		<!--<el-form-item>-->
				    		<!--<el-button type="primary" @click="" class="btn"><i class="el-icon-check"></i>生成班级</el-button>-->
			  			<!--</el-form-item>-->
					<!--</el-form>-->
				<!--</el-dialog>-->
				<!--分配老师-->
				<el-dialog title="分配老师" :visible.sync="showTeacher">
					<el-form class="editTeacher" :label-position="labelPosition">
            <el-form-item label="班级" class="teacher">
              <span class="className">{{gradeClassName}}</span>
            </el-form-item>
            <el-form-item label="任教老师" class="teacher">
              <span class="teachername">{{teacher_name}}</span>
            </el-form-item>
            <el-form-item label="分配老师" class="teacher">
              <span v-for="item in allTeacherName" class="teacherName" :id = "item.id" @click="addTeacher(item.id)">{{item.teacher_name}}</span>
            </el-form-item>
					</el-form>
				  <div slot="footer" class="dialog-footer footer">
            <el-button type="primary" class="btn" @click="postTeacher"><i class="el-icon-check"></i>保存</el-button>
				  </div>
				</el-dialog>
			</div>
		</el-card>
	</div>
</template>

<script>
	/* eslint-disable */
	export default {
		data(){
			return {
				loading:true,
        //老师id
        teacherId:'',
        classification:'',
				classesType:[],
        Teacher:[],
        classInfo: [],
        rows:8,//每页几条
        page:1,//当前显示页数
        pagesizes:[8,12,18,24],//更改每页显示条数
        total:20,//一共多少条,
        ruleForm: {
          grade: '',
          classNum: '',
          teacher: '',
        },
        //行政班隐藏
        showAdd:false,
        Administrationtype:'行政班',
        year:[],
        teacherName:[],
        gradeId:'',
        teacherAll:'',
        //兴趣班隐藏
        // showAddInterest:false,
        //分配老师隐藏
        showTeacher:false,
        gradeClassName:'',
        labelPosition:'right',//右对其
        teacher_name:'',
        allTeacherName:[],
        allTeacherNameId:[],
        nowTeacher:'',
        classId:'',
				rule:'',
			}

		},
		methods: {
			//返回上一页
			back(){
				this.$router.push({name:'teaching'})
			},
      //获取班级信息
      getGradeClassInfo(){
        this.$http.post('/api/grade_class/getGradeClassInfo',{
          rows:this.rows,
          page:this.page,
          teacher_id:this.teacherId,
          type:this.classification
        }).then(res=>{
          this.loading = false
          this.classInfo = res.data.data
          this.total = res.data.count
        })
      },
      //每页显示条数
			SizeChange(val){
				this.rows = val
				this.getGradeClassInfo()
			},
			//切换第几页
			currentChange(val){
        this.page = val
        this.getGradeClassInfo()
		 	},
     //搜索框内容
      classSearchInfo(){
        this.$http.post('/api/grade_class/classSearchInfo')
          .then(res=>{
            this.classesType = res.data.type
            this.Teacher = res.data.teacher
        })
      },
      //搜索班级信息
      onSubmit() {
				this.getGradeClassInfo()
      },
      //获取添加行政班所有信息
      addAdministration(){
        this.$http.post('/api/grade_class/getAddClassInfo')
          .then(res=>{
            if(res.data.errorCode == 400){
              this.$message({
                type:'error',
                message:res.data.msg
              })
              return
            }else {
              this.year = res.data.year
              res.data.year.map(item =>{
                item.gradeId = item.id
              })
              this.teacherName = res.data.teacher
              this.showAdd = true
            }
          })
      },
      //添加行政班级
      addClass(){
        this.$http.post('/api/grade_class/addClass',{
          class_num:this.ruleForm.classNum,
          type:this.Administrationtype,
          teacher_id:this.teacherAll,
          grade_id:this.gradeId
        }).then(res=>{
          if(res.data.code===200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.showAdd = false
            this.getGradeClassInfo()
            //清空添加列表数据
            this.ruleForm.classNum = ''
            this.teacherAll = ''
            this.gradeId = ''
          }else if(res.data.errorCode){
            this.$message({
              type: 'error',
              message: res.data.msg
            })
            this.showAdd = true
          }

        })
      },
      //添加兴趣班
      // addInterest(){
      //   this.showAddInterest = true
      // },
      //删除功能
			del(id){
				this.$confirm('是否永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/api/grade_class/delClass', {
            id:id
          }).then(res=>{
            if(res.data.code == 200){
              this.$message({
                type: 'success',
                message: res.data.msg
              });
            }else if(res.data.errorCode == 400){
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
            this.getGradeClassInfo()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
			},
			//分配老师
			teacherDistributionClassInfo(id){
				this.classId = id
				this.$http.post('/api/grade_class/getTeacherDistributionClassInfo',{
				  id:id
				}).then(res=>{
          this.gradeClassName = res.data.data.get_grade.grade_title+res.data.data.class_name
          if(res.data.data.get_teacher){
            this.teacher_name = res.data.data.get_teacher.teacher_name
          }
          this.allTeacherName = res.data.teacher
          res.data.teacher.map(item=>{
            this.allTeacherNameId = item.id
          })
        })
				this.showTeacher = true
			},
			//选择教师
			addTeacher(id){
				if(!this.nowTeacher) {
					$('#'+id).css({"background": "#00B02D"})
					this.nowTeacher = id
				}else if(id ==this.nowTeacher){
					$('#'+id).css({"background": "#ccc"})
				}else if(id != this.nowTeacher) {
					$('#'+id).css({"background": "#00B02D"})
					$('#'+this.nowTeacher).css({"background": "#ccc"})
					this.nowTeacher = id
				}
			},
			//分配教师提交
			postTeacher(){
				this.$http.post('/api/grade_class/teacherDistributionClassInfo',{
					teacher_id :this.nowTeacher,
					id:this.classId
				}).then(res=>{
					if(res.data.code == 200) {
						this.$message({
              type: 'success',
              message: res.data.msg
            })
						this.showTeacher = false
						this.getGradeClassInfo()
            $('#'+this.nowTeacher).css({"background": "#ccc"})
					}else {
						this.$message({
              type: 'error',
              message: res.data.msg
            })
						this.showTeacher = true
					}
				})
			},
			//查看学生
			configureClass(id){
				this.$router.push({path:'/studentNow/'+id})
			}
    },
		created(){
			this.getGradeClassInfo()
			this.classSearchInfo()
			//获取到身份
			this.rule = localStorage.getItem('rule')
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.classManagement {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addAdministration {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 240px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.addInterest {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 100px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card {
		margin: 30px 50px;
		.card {
			padding: 20px;
			.btn {
				text-align: center;
				margin-left: 30px;
			}
			.fenye {
				margin-top: 20px;
				text-align: center;
			}
			.editTeacher {
				.className {
					padding-left: 25px;
					color: #FF4D51;
				}
				.teacherName {
					display: inline-block;
					height: 35px;
					line-height: 35px;
					border-radius: 5px;
					text-align: center;
					background: #ccc;
					margin-right: 10px;
					padding: 0 20px;
					cursor: pointer;
				}
				.grey {
					background: #ccc;
				}
				.green {
					background: #00B02D;;
				}
			}
		}

	}
</style>
